<template>
    <view class="book-card" >
        <gw-book-info class="books" v-for="(item, index) in bookList"
                      :key="index"
                      :item="item"
                      @tap.stop="watchBook(item)"
                      />
    </view>
</template>

<script>
    import gwBookInfo from '@/pages/components/gw-book-info'
    import service from "@/service";
    export default {
        name: "card",
        props: {
            itemId: {
                type: String,
                default: ''
            },
            idName: {
                type: String,
                default: ''
            },
        },
        watch: {
            itemId(newVal){
                this.getBooks(newVal)
            }
        },
        components: {
            gwBookInfo
        },
        data(){
            return {
                bookList: []
            }
        },
        mounted(){
            this.getBooks(this.itemId);
        },
        methods: {
            watchBook(item){
                uni.navigateTo({
                    url: `../../components/gw-book-detail?booksId=${item.booksId}`
                })
            },
            getBooks (id) {
                uni.showLoading({
                    title: '加载中',
                });
                let params = {
                    [this.idName+'Id']: id,
                    page: 1,
                    limit: 3
                }
                service.homeService.getBooks({
                    data: params,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.bookList = res.result.data || [];
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .book-card{
        display: flex;
        flex-wrap: wrap;
        .books{
            margin-right: 15rpx;
            &:nth-of-type(3n){
                margin-right: 0;
            }
        }
    }
</style>